Manifest File 是什麼？

列出一些 PWA 網站的 manifest.json 檔案給大家參考。

• airhorner 的 manifest.json
• voice-memos 的 manifest.json
• flipkart 的 manifest.json
• Chrome Dev Summit 2016 的 manifest.json

下方為 Chrome Dev Summit 2016 的 manifest.json 內容

{
  "name": "Chrome Dev Summit 2016",
  "short_name": "CDS 2016",
  "icons": [{
    "src": "/devsummit/static/images/icons/cds-icon@192.png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "/devsummit/static/images/icons/cds-icon@512.png",
    "sizes": "512x512",
    "type": "image/png"
  }],
  "start_url": "/devsummit/",
  "display": "standalone",
  "orientation": "portrait",
  "background_color": "#FAFAFA",
  "theme_color": "#6387F5"
}

Manifest File 是一個 json 檔案，列舉可以實現的功能如下：

• Add to Home Screen
• 顯示 Splash Screen
• 設定網站顯示模式
• 變更螢幕顯示方向
• 修改網站佈景顏色
• 調整網站起始連結

詳細介紹如下：

Add to Home Screen

• 如果使用者五分鐘內連到你的網站兩次，設定 Manifest File 之後就會提示你是否要將網站加到 Home Screen。

{
  "name": "Chrome Dev Summit 2016",
  "short_name": "CDS 2016",
  "icons": [{
    "src": "/devsummit/static/images/icons/cds-icon@192.png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "/devsummit/static/images/icons/cds-icon@512.png",
    "sizes": "512x512",
    "type": "image/png"
  }]
}
 

• name 或 short_name
  • 如果 name 無法完整顯示，則會改為顯示 short_name。
  • 預計會顯示在：
    • Add to Home Screen 的安裝提示文字
    • 網站載入時出現 Splash Screen 的文字
    • App launcher 行動裝置桌面上的 icon 文字
• icons
  • Array 裡 存放多個 Object，用來指定網站應用到的圖示，瀏覽器會搜尋符合顯示器的密度等對應的資源
  • 預計會顯示在：
    • Add to Home Screen 的安裝提示 icon
    • 網站載入時出現 Splash Screen 的 icon
    • App launcher 行動裝置桌面上的 icon
  • src
    • icon 路徑來源
  • sizes
    • icon 尺寸大小，可以多組
  • type
    • icon 類型，可以快速忽略不支援的圖像

操作流程類似下方動畫這樣，成功將網站加入 Home Screen 後，就會像 APP 一樣，將看到手機桌面上有一個 icon，能讓使用者快速啟動網站。

延伸閱讀：

• Web App Manifest - name
• Web App Manifest - short_name
• Web App Manifest - icons

顯示 Splash Screen

• 類似 App 的體驗，開啟時、會有一個畫面，中間放 LOGO，閃一下的過場動畫效果
• Manifest File 可以設定中間 LOGO 的圖檔來源以及 Splash Screen 的背景顏色等

例如下方為 flipkart 的 Splash Screen

圖片來源：flipkart blog

{
    "name": "Flipkart Lite",
    "short_name": "Flipkart Lite"
    "icons": [{
        "src": "https://img1a.flixcart.com/www/linchpin/batman-returns/logo_lite-cbb3574d.png",
        "sizes": "192x192",
        "type": "image/png"
    }],
    "background_color": "#2874f0"
}

• name/short_name
  • 在前面的文章已經有介紹 name/short_name，這邊是指定 Splash Screen 的文字
• icons
  • 在前面的文章已經有介紹 icons，這邊是指定 Splash Screen 的圖示
• background_color
  • 設定 Splash Screen 的背景顏色

延伸閱讀：Web App Manifest - background_color

設定網站顯示模式

• 設定開啟網站時的顯示模式，例如：要顯示全螢幕畫面還是有 URL bar 的畫面
• 設定網站顯示類型
  • browser (預設)，有 URL 列表，像一般的網站的體驗
  • standalone，隱藏瀏覽器的 UI
  • fullscreen 全螢幕，沒有 URL 列表，像 APP 的體驗
• 瀏覽器必須支援，否則會 Fallback Display Mode

"display": "standalone"

延伸閱讀：Web App Manifest - display

變更螢幕顯示方向

• orientation
  • 可以強制指定網站顯示方向
  • 請謹慎使用此指令，通常使用者希望自己選擇方向
  • 通常應用在 GAME 裡，可能會需要強制設定方向

"orientation": "portrait"

延伸閱讀：Web App Manifest - orientation

修改網站佈景顏色

• theme_color
  • 設定網站每個頁面的主題顏色，例如改變 URL 的顏色

"theme_color": "#2196F3"

延伸閱讀：Web App Manifest - theme_color

調整網站起始連結

• start_url
  • 使用者點擊行動裝置桌面上的 icon 時，所開啟網站的連結
  • 如果不提供 start_url，將使用當前頁面的URL
  • 通常使用 "start_url": "/" 或 "start_url": "."
  • 可以針對 Google Analytics 加入 ?utm_source=homescreen

"start_url": "/?utm_source=homescreen"

延伸閱讀：Web App Manifest - start_url

實作 To-Do List 的 manifest

接著新增 To-Do List 的 Web App Manifest File，實作主要執行 3 個步驟如下：

1.新增 manifest 檔案（一個簡單的 json 檔案）

{
    "name": "PWA To-Do List with Vanilla JS",
    "short_name": "To-Do List",
    "start_url": "/",
    "icons": [{
        "src": "/assets/images/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
    }, {
        "src": "/assets/images/icon-256x256.png",
        "sizes": "256x256",
        "type": "image/png"
    }, {
        "src": "/assets/images/icon-384x384.png",
        "sizes": "384x384",
        "type": "image/png"
    }, {
        "src": "/assets/images/icon-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
    }],
    "background_color": "#707477",
    "theme_color": "#f2f2f2",
    "display": "standalone",
    "orientation": "portrait"
}

2.新增 icons 的圖檔
例如： /assets/images/icon-256x256.png

3.載入 manifest 檔案

在 `index.html` 的 `<head>` 加上 `manifest.json` 檔案

```
<link rel="manifest" href="/manifest.json">  
```

Generator your manifest

因為 manifest 的檔案其實蠻簡單的，也可以透過線上的工具自動產生，像是在 Web App Manifest Generator 的網站裡，輸入網站資訊，接著上傳圖檔，按一個按鈕就可以自動生成 manifest.json

Test your manifest

最後，你可以直接在本機透過 Application panel of Chrome DevTools，去驗證你的 web app manifest 是否設定正確。

或者 deploy 網站之後，拿起 Android 手機，進行實測如下

• todolist-pwa-demo 網站連結

  • 備註：此網站 API 使用 json-server 的方式，所以此連結無法實現 todolist 功能，僅檢視 manifest 實現內容。

• todolist-pwa-demo 的 manifest 檔案連結

• todolist-pwa-demo deploy 後，檢視 Chrome DevTools：

• 也可以驗證其他網站的 manifest，作為參考：

參考文件

• The Web App Manifest

• Web App Manifest

本日小結

本篇文章介紹 Manifest File 是一個單純的 json 檔案，透過 Manifest File 的設定，讓使用者瀏覽變得更像 APP 體驗，包括 Add to Home Screen、顯示 Splash Screen 等效果，也實作 To-Do List 的 manifest，瞭解如何自動生成 manifest 檔案，最後說明可以透過 Chrome DevTools 快速檢查 manifest 檔案是否正確。

本人小小筆記，如有錯誤或需要改進的部分，歡迎給予回饋。
我將會用最快的速度修正，m(_ _)m。謝謝